// pages/discover/discover.js
import request from '../../utils/request';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 轮播图列表
    banners: [],
    // 推荐歌单列表
    recommendList: [],
    hotTags: [],
    hotSongList: {
      title: '',
      list: []
    },
    _isRefreshing: false,
    _hotSongIndex: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    /*
      请求的注意事项：
        1. 小程序只可以跟指定的域名进行网络通信。
        2. 域名只支持 https 和 wss 协议
        3. 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost
          上线微信小程序，必须配置服务器域名。
            开发 - 开发管理 - 开发设置 - 服务器域名
          开发微信小程序，禁止检查服务器域名
            微信开发者调试工具 - 详情 - 本地设置 - 不校验合法域名
        4. wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个
          建议：一个页面最多同时请求10个
        5. 只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。
    */
    // wx.request({
    //   url: 'http://localhost:3000/banner',
    //   data: {
    //     type: 2
    //   },
    //   method: 'GET',
    //   success: (res) => {
    //     /*
    //       res: {
    //         data: { // 服务器响应的数据
    //           code: 200, // 功能状态码
    //           xxx
    //         },  
    //         statusCode: 200, // 服务器响应状态码
    //       }
    //     */
    //     // console.log('success', res);
    //     if (res.statusCode >= 200 && res.statusCode < 300) {
    //       // 请求成功
    //       if (res.data.code === 200) {
    //         // 功能成功
    //         console.log(res.data.banners);
    //       } else {
    //         // 功能失败
    //         wx.showToast({
    //           title: res.data,
    //           icon: 'error'
    //         })
    //       }
    //     } else {
    //       // 请求失败
    //       wx.showToast({
    //         title: '请求失败啦~',
    //         icon: 'error'
    //       })
    //     }
    //   },
    //   fail: (err) => {
    //     // console.log('fail', err);
    //     wx.showToast({
    //       title: '请求失败啦~',
    //       icon: 'error'
    //     })
    //   }
    // })
    this.getBanners();
    this.getHotSongList();
  },
  async getBanners() {
    const type = this.getSystemType();
    const res = await request('/banner', {
      type
    });
    this.setData({
      // pic bannerId typeTitle
      banners: res.banners.map(item => {
        // 只需要需要使用的数据，其他数据不要
        return {
          id: item.bannerId,
          pic: item.pic,
          title: item.typeTitle,
        }
      })
    })
  },
  // 获取设备类型
  getSystemType() {
    /*
      0: pc 
        model: "Windows"
        system: "Windows 10.0"

        model: "Mac 15-inch"
        system: "macOS 10.14.3"
      1: android
        model: "Nexus 5"
        system: "Android 5.0"
      2: iphone
        model: "iPhone 6/7/8"
        system: "iOS 10.0.1"
      3: ipad
        model: "iPad"
        system: "iOS 10.0.1"
    */
    let type = 0;
    const {
      system,
      model
    } = wx.getSystemInfoSync();

    if (system.indexOf('Android') === 0) {
      type = 1;
    } else if (system.indexOf('iOS') === 0) {
      if (model === 'iPad') {
        type = 3;
      } else {
        type = 2;
      }
    };
    return type;
  },

  async getHotSongList() {
    // 1. 获取热门标签列表（只需一次）
    const {
      tags
    } = await request('/playlist/highquality/tags')
    this.setData({
      hotTags: tags.map(item => item.name)
    })
    // 2 - 3
    this.getHotSongDetail();
  },
  async getHotSongDetail() {
    // 2. 获取热门标签下的歌单（可能多次）
    const {
      playlists
    } = await request('/top/playlist/highquality', {
      cat: this.data.hotTags[this.data._hotSongIndex],
      limit: 1
    })
    const {
      name,
      id
    } = playlists[0];
    // 3. 获取歌单详情（可能多次）  
    const {
      playlist
    } = await request('/playlist/detail', {
      id
    })

    const hotSongList = playlist.tracks.map(item => {
      return {
        id: item.id,
        name: item.name,
        picUrl: item.al.picUrl,
        author: item.ar.map(item => item.name).join(' / ')
      }
    })

    /*
      需求：将来遍历三个一组
      {
        title: name,
        list: [
          {
            id: xxx,
            list: [
              // 3个歌曲对象
            ]
          }
        ]
      }
    */
    const list = [];

    while (Math.floor(hotSongList.length / 3)) {
      // const result = [];
      // for (let i = 0; i < 3; i++) {
      //   const arr = hotSongList.splice(0, 1); // 返回值一定是数组
      //   result.push(arr[0])
      // }
      const result = hotSongList.splice(0, 3); // 返回值一定是数组
      list.push({
        id: result[0].id,
        list: result,
      })
    }

    this.setData({
      hotSongList: {
        title: name,
        list
      }
    })
  },
  // 刷新热门歌曲
  refreshHotSongList() {
    if (this.data._isRefreshing) return;
    // 不会涉及到页面的变化
    this.data._isRefreshing = true;
    // 让刷新图标产生动画
    this.animate('.icon-shuaxin', [
      {
        rotate: 0
      },
      {
        rotate: 720
      },
    ], 800, () => {
      this.clearAnimation('.icon-shuaxin', {
        rotate: true
      }, () => {
        this.data._isRefreshing = false;
      })
    });
    // 让下标++，就会取下一个tag
    this.data._hotSongIndex++
    if (this.data._hotSongIndex >= this.data.hotTags.length) {
      this.data._hotSongIndex = 0
    }
    // 获取新数据
    this.getHotSongDetail();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  async onShow() {
    const {
      result
    } = await request('/personalized', {
      limit: 10
    })

    this.setData({
      recommendList: result.map(item => {
        return {
          id: item.id,
          name: item.name,
          picUrl: item.picUrl,
          playCount: Math.round(item.playCount / 10000) + '万'
        }
      })
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})